<template>
  <div class="analysis">
    <div id="main" style="height: 500px"></div>
    <my-line class="myline" :lineList="lineList"></my-line>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { getGroupInfo } from "@/service/leaveService";
import myLine from "@/components/student/myLine.vue";
let lineList = ref<any>(); //线型图的集合
onMounted(async () => {
  //取出我们要的数据
  let result2 = await getGroupInfo({ key: "type" });
  //根据审批的类别分组
  lineList.value = result2.data.result; //把父组件的数据传给子组件
});
onMounted(async () => {
  let ressss: any = await getGroupInfo({ key: "username" });
  let nameList: any = [];
  let countList: any = [];
  ressss.data.result.forEach(async (item: any) => {
    nameList.push(item["_id"]);
    countList.push(item["count"]);
  });
  //页面结构加载完成
  var myChart = echarts.init(document.getElementById("main") as HTMLElement);
  // 绘制图表
  myChart.setOption({
    //设置属性
    title: {
      text: "2213班学生请假情况",
    },
    tooltip: {},
    xAxis: {
      data: [...nameList],
    },
    yAxis: {},
    series: [
      {
        name: "次数",
        type: "line",
        data: [...countList],
      },
      {
        barWidth: "10px",
        name: "次数",
        type: "bar",
        data: [...countList],
        color: ["#dd6b66", "#759aa0", "#e69d87", "#8dc1a9", "#ea7e53"],
        showBackground: true,
        backgroundStyle: {
          color: "rgba(220, 220, 220, 0.8)",
        },
      },
    ],
  });
});
</script>
<style lang="less" scoped>
.analysis {
  display: flex;
  #main {
    flex: 1;
  }
  .myline {
    flex: 1;
  }
}
</style>
